<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志控制</title>
    <style>
        body > fieldset {
            margin-bottom: 30px;
        }

        body > fieldset > fieldset {
            border-width: 1px;
        }

        body > fieldset > fieldset > div {
            padding: 5px 0;
        }

        body > fieldset > fieldset > div > input {
            width: 500px;
            padding: 3px 7px;
        }

        .btnDel {
            margin-right: 5px;
        }

        .btnAdd {
            margin-left: 5px;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        var path = "/fx/log";

        function bindBtnDel() {
            $(".btnDel").off().on("click", function () {
                if (confirm("确认删除?") !== true) {
                    return;
                }
                $(this).closest("div").remove();
            });
        }

        function bindBtnAdd() {
            $(".btnAdd").off().on("click", function () {
                var d = $(this).closest("div");
                var t = d.find("input").val();
                if (t.length === 0) {
                    return;
                }
                var p = $("<div/>").insertBefore(d);
                $("<a/>").addClass("btnDel").attr("href", "javascript:void(0);").text("删除").appendTo(p);
                $("<input/>").val(t).appendTo(p);
                d.find("input").val("");
                bindBtnDel();
            });
        }

        function bindBtnSave() {
            $("fieldset>input[type=button]").on("click", function () {
                var fd = $(this).closest("fieldset");
                var name = fd.find("legend:first").text()
                var file = fd.find(".file");
                var file_lv = [];
                file.find("input[type=checkbox]:checked").each(function (i, n) {
                    file_lv.push($(n).val());
                });
                var file_pos = [];
                file.find(".btnDel").each(function (i, n) {
                    file_pos.push($(n).closest("div").find("input").val());
                });
                var cons = fd.find(".console");
                var cons_lv = [];
                cons.find("input[type=checkbox]:checked").each(function (i, n) {
                    cons_lv.push($(n).val());
                });
                var cons_pos = [];
                cons.find(".btnDel").each(function (i, n) {
                    cons_pos.push($(n).closest("div").find("input").val());
                });
                $.post(path + "/set", {
                    name: name,
                    file_lv: file_lv.join(","),
                    file_pos: file_pos.join(","),
                    cons_lv: cons_lv.join(","),
                    cons_pos: cons_pos.join(",")
                }, function (rs) {
                    if ("ok" === rs) {
                        alert("设置成功");
                    } else {
                        alert(rs);
                    }
                });
            });
        }

        $(function () {
            bindBtnAdd();
            bindBtnSave();
            $.get(path + "/getAll?" + Math.random(), function (rs) {
                var lvs = ["ERROR", "WARN", "INFO", "DEBUG", "TRACE"];
                $(rs).each(function (rsIdx, rsItem) {
                    var f = $("<fieldset/>").appendTo("body");
                    $("<legend/>").text(rsItem.name).appendTo(f);
                    var file = $("<fieldset/>").addClass("file").appendTo(f);
                    $("<legend/>").text("文件输出").appendTo(file);
                    $(lvs).each(function (i, lv) {
                        var chk = $("<input/>")
                            .attr("type", "checkbox").attr("value", lv).attr("id", "chk" + rsIdx + i);
                        $(rsItem.file_lv).each(function (i, n) {
                            if (n === lv) {
                                chk.attr("checked", "checked");
                            }
                        });
                        file.append(chk);
                        $("<label/>").attr("for", "chk" + rsIdx + i).text(lv)
                            .appendTo(file);
                    });
                    $(rsItem.file_pos).each(function (i, pos) {
                        var d = $("<div/>").appendTo(file);
                        $("<a/>").addClass("btnDel").attr("href", "javascript:void(0);").text("删除").appendTo(d);
                        $("<input/>").val(pos).appendTo(d);
                    });
                    var fileAdd = $("<div/>").appendTo(file);
                    $("<input/>").appendTo(fileAdd);
                    $("<a/>").addClass("btnAdd").attr("href", "javascript:void(0);").text("添加").appendTo(fileAdd);

                    var cons = $("<fieldset/>").addClass("console").appendTo(f);
                    $("<legend/>").text("控制台输出").appendTo(cons);
                    $(lvs).each(function (i, lv) {
                        var chk = $("<input/>")
                            .attr("type", "checkbox").attr("value", lv).attr("id", "chk" + rsIdx + (i + lvs.length));
                        $(rsItem.cons_lv).each(function (i, n) {
                            if (n === lv) {
                                chk.attr("checked", "checked");
                            }
                        });
                        cons.append(chk);
                        $("<label/>").attr("for", "chk" + rsIdx + (i + lvs.length)).text(lv)
                            .appendTo(cons);
                    });
                    $(rsItem.cons_pos).each(function (i, pos) {
                        var d = $("<div/>").appendTo(cons);
                        $("<a/>").addClass("btnDel").attr("href", "javascript:void(0);").text("删除").appendTo(d);
                        $("<input/>").val(pos).appendTo(d);
                    });
                    var consAdd = $("<div/>").appendTo(cons);
                    $("<input/>").appendTo(consAdd);
                    $("<a/>").addClass("btnAdd").attr("href", "javascript:void(0);").text("添加").appendTo(consAdd);
                    $("<input/>").attr("type", "button").attr("value", "保存设置").appendTo(f);
                });
                bindBtnSave();
                bindBtnAdd();
                bindBtnDel();
            });
        });
    </script>
</head>
<body>

</body>
</html>